<!-- 个人中心 -->
<template>
  <div class="userArea">
    <div class="areaUser">
      <!-- <img class="userHead" src="@/assets/footerBg.png" alt="" srcset="" /> -->
      <div class="userInfo">
        <div class="name">{{ userInfo.name }}</div>
        <!-- <div class="info">湖北省优秀教师、武汉市优秀教师</div> -->
      </div>
    </div>
    <div class="infoList">
      <!-- <div class="infoItem">
        <div class="infoVal">{{ totoTime }}天</div>
        <div class="infoLabel">累计学习</div>
      </div> -->

      <div class="infoItem">
        <div class="infoVal">{{ totoTime }}</div>
        <div class="infoLabel">总时长</div>
      </div>

      <div class="infoItem">
        <div class="infoVal">{{ totalCourse }}门</div>
        <div class="infoLabel">学习课程</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from '@/utils/auth'
import { selectMyTimeReport } from '@/api/personal'
export default {
  name: 'UserArea',
  data() {
    return {
      totalCourse: 0,
      totoTime: 0
    }
  },
  computed: {
    userInfo() {
      return getUserInfo() || {}
    }
  },
  mounted() {
    this.selectMyTimeReportFn()
  },
  methods: {
    async selectMyTimeReportFn() {
      try {
        const resData = await selectMyTimeReport({});
        this.totalCourse = resData.totalCourse;
        const seconds = resData.totoTime;
        
        const hours = Math.floor(seconds / 3600);
        const minutes = Math.floor((seconds % 3600) / 60);
        const remainingSeconds = seconds % 60;

        // 根据需要选择格式化的详细程度
        let formattedDuration = `${hours}小时${minutes}分钟`;
        if (remainingSeconds) {
          formattedDuration += `${remainingSeconds}秒`;
        }
        this.totoTime = formattedDuration;
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.userArea {
  width: 100%;
  height: 88px;
  border-radius: 8px;
  display: flex;
  background: #fff;
  margin-top: 32px;
  padding: 0 24px;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;

  .areaUser {
    box-sizing: border-box;
    display: flex;
    .userHead {
      width: 56px;
      height: 56px;
      border-radius: 50%;
    }
    .userInfo {
      margin-left: 12px;
      .name {
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        color: $text-title-color;
      }
      .info {
        margin-top: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: $text-color;
      }
    }
  }
  .infoList {
    display: flex;
    align-items: center;
    .infoItem {
      margin-left: 80px;
      text-align: center;
      .infoVal {
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        color: $text-title-color;
      }
      .infoLabel {
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        margin-top: 4px;
        color: $text-color-secondary;
      }
    }
  }
}
</style>
